<template>
  <!--
      作者 luoyiming
      时间：2019-10-26
      描述：设置-网站设置
  -->
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="150px">
      <!-- <div class="common-form">站点设置</div> -->
      <el-form-item label="网站状态：">
        <el-radio-group v-model="form.web_status">
          <el-radio label="0">开启</el-radio>
          <el-radio label="1">关闭</el-radio>
        </el-radio-group>
        <span v-if="form.web_status==1">
          <br /><br />
          <el-input v-model="form.close_url" placeholder="关闭后,访问网站跳转的URL,http://" class="max-w460"></el-input>
          <br /><br />
          <el-input v-model="form.close_html" placeholder="关闭后,访问网站显示的public下的静态模板路径,close.html" class="max-w460">
          </el-input>
        </span>
      </el-form-item>
      <el-form-item label="网站名称" :rules="[{required: true,message: ' '}]" prop="web_name">
        <el-input v-model="form.web_name" placeholder="站点名称" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="网站LOGO：">
        <el-row>
          <div class="draggable-list">
            <div class="item img-select" v-if="form.web_logo==''" @click="openUpload('image', 'logo')"><i
                class="el-icon-plus"></i></div>
            <div v-if="form.web_logo!=''" class="item" @click="openUpload('image', 'logo')">
              <img :src="form.web_logo" width="100" height="100" />
            </div>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="地址栏图标：">
        <el-row>
          <div class="draggable-list">
            <div class="item img-select" v-if="form.web_ico==''" @click="openUpload('image', 'ico')"><i
                class="el-icon-plus"></i></div>
            <div v-if="form.web_ico!=''" class="item" @click="openUpload('image', 'ico')">
              <img :src="form.web_ico" width="100" height="100" />
            </div>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="网站网址" prop="web_site">
        <el-input v-model="form.web_site" placeholder="网站网址" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="首页标题" prop="web_title">
        <el-input v-model="form.web_title" placeholder="首页标题" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="首页关键词" prop="web_keywords">
        <el-input v-model="form.web_keywords" placeholder="关键词" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="首页描述" prop="web_description">
        <el-input type="textarea" rows="5" v-model="form.web_description" placeholder="描述" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="版权信息" prop="web_copyright">
        <el-input v-model="form.web_copyright" placeholder="版权信息" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="备案号" prop="web_recordnum">
        <el-input v-model="form.web_recordnum" placeholder="备案号" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="公安备案号" prop="web_garecordnum">
        <el-input v-model="form.web_garecordnum" placeholder="公安备案号" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="第三方代码" prop="web_thirdcode_pc">
        <el-input type="textarea" rows="5" v-model="form.web_thirdcode_pc" placeholder="第三方代码" class="max-w460">
        </el-input>
      </el-form-item>
      <!-- <div class="common-form">日志记录</div> -->
      <el-form-item label="是否记录查询日志" prop="customer">
        <el-checkbox v-model="form.is_get_log">是否记录查询日志</el-checkbox>
        <div class="tips">如果记录，日志量会有点大</div>
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
    <!--上传图片-->
    <Upload v-if="isupload" :isupload="isupload" :config="{ total: 3 }" @returnImgs="returnImgsFunc"></Upload>

  </div>

</template>

<script>
  import SettingApi from '@/api/setting.js';
  import Upload from '@/components/file/Upload';
  import {
    formatModel
  } from '@/utils/base.js';
  import draggable from 'vuedraggable';
  export default {
    components: {
      Upload,
      draggable
    },
    data() {
      return {
        /*是否正在加载*/
        loading: false,
        /*form表单数据*/
        form: {
          web_status: '',
          web_name: '',
          web_logo: '',
          web_ico: '',
          web_site: '',
          web_title: '',
          web_keywords: '',
          web_description: '',
          web_copyright: '',
          web_recordnum: '',
          web_garecordnum: '',
          web_thirdcode_pc: '',
          is_get_log: 0
        },
        /*是否打开图片选择*/
        isupload: false,
        file_name: 'logo',
      };
    },
    created() {
      this.getParams()
    },

    methods: {

      /*获取配置数据*/
      getParams() {
        let self = this;
        SettingApi.storeDetail({}, true).then(res => {
            let vars = res.data.vars.values;
            self.form = formatModel(self.form, vars);
            self.loading = false;
          })
          .catch(error => {

          });
      },
      /*提交*/
      onSubmit() {
        let self = this;
        let params = this.form;
        self.$refs.form.validate((valid) => {
          if (valid) {
            self.loading = true;
            SettingApi.editStore(params, true)
              .then(data => {
                self.loading = false;
                self.$message({
                  message: '恭喜你，设置成功',
                  type: 'success'
                });
                self.$router.push('/setting/store/index');
              })
              .catch(error => {
                self.loading = false;
              });
          }
        });
      },
      //监听复选框选中
      handleCheckedGetLog(e) {

      },
      /*打开上传图片*/
      openUpload: function(file_type, file_name) {
        this.file_name = file_name;
        if (file_type == 'image') {
          this.config = {
            total: 9,
            file_type: 'image'
          };
        } else {
          this.config = {
            total: 1,
            file_type: 'video'
          };
        }
        this.isupload = true;
      },

      /*上传商品图片*/
      returnImgsFunc(e) {
        console.log(e);
        if (e != null) {
          if (this.file_name == 'logo') {
            this.form.web_logo = e[0].file_path;
          } else if (this.file_name == 'ico') {
            this.form.web_ico = e[0].file_path;
          }
        }
        this.isupload = false;
      },
    }

  };
</script>
<style>
  .tips {
    color: #ccc;
  }

  .draggable-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .draggable-list .wrapper>span {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .draggable-list .item {
    position: relative;
    width: 110px;
    height: 110px;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dddddd;
  }

  .draggable-list .delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: red;
    line-height: 16px;
    font-size: 16px;
    color: #ffffff;
    display: none;
  }

  .draggable-list .item:hover .delete-btn {
    display: block;
  }

  .draggable-list .item img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 100%;
    max-width: 100%;
  }

  .draggable-list .img-select {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #dddddd;
    font-size: 30px;
  }

  .draggable-list .img-select i {
    color: #409eff;
  }
</style>
